<template>
  <div class="baseInfo">
    <div class="slider">
        <swiper2 :slides="baseInfo.pics"></swiper2>
        <div class="ui-share">
            <i class="lyf-icons lyf-share"></i>
        </div>
    </div>
    <div class="pro-info">
        <div class="name ui-ellipsis c3 f16 c3">
            <span>{{baseInfo.name}}</span>
        </div>
        <div class="subTitle cff4444">{{baseInfo.subTitle}}</div>
        <div class="price cff6900">
            ￥<span class="cff6900 f18 fb">{{baseInfo.price}}</span>
        </div>
        <ul class="ui-row-flex c808080 f14">
            <li class="c808080">
                已售 : <span>{{baseInfo.volume4sale}}</span>
            </li>
            <li class="c808080">
                库存 : <span>{{baseInfo.stockNum}}</span>
            </li>
        </ul>
    </div>
    <div class="ui-form">
        <div class="ui-form-item line40h40 f14 more" @click="showCnt">
            <span class="c808080">已选</span>
            <span class="mgL20">
                1个
            </span>
            <span class="posR">
                <i class="icons2 icons2-arrow-r"></i>
            </span>
        </div>
    </div>
    <div class="ui-form">
        <div class="ui-form-item line40h40 more">
            <span class="cff6900 f14">送至</span>
            <span class="mgL15 f14">
                <i class="icons4 icons4-location"></i>
                北京 北京市 昌平区
            </span>
            <span class="posR">
                <i class="icons2 icons2-arrow-r"></i>
            </span>
        </div>
    </div>
    <div>
        <ul class="mpcList">
            <li class="list-title more line50h50">
                <p class="fr">
                    <span class="mgR8">好评度</span>
                    <span class="cff4444">{{rates.positiveRate}}%</span>
                </p>
                <p>商品评价({{rates.ratingUserCount}})</p>
                <span class="posR" @click="toRates">
                    <i class="icons2 icons2-arrow-r"></i>
                </span
            </li>
            <li class="list bd-top"
             v-for="(c,index) in rates.mpcList.listObj.slice(0,3)"
              :key="index">
                <p>
                    <span class="fr c9">{{c.userUsername}}</span>
                </p>
                <p>
                    <i class="lyf-icons lyf-star" v-for="(i,index) in 5" :key="index"></i>
                </p>
                <p class="mgB10"></p>
            </li>
            <li class="list bd-top f14 tc c808080"
             @click="toRates()">
                查看全部评价
            </li>
        </ul>
    </div>
    <GuessLike></GuessLike> 
  </div>
</template>
<script>
import swiper2 from "../common/Swiper2"
import GuessLike from "../cart/GuessLike"
export default {
    components: {
        swiper2, GuessLike
    },
    computed: {
        baseInfo() {
            return this.$store.state.good.baseInfo;
        }, 
        rates() {
            return this.$store.state.good.rates;
        },
    },
    methods: {
        toRates() {
            this.$store.commit('setActiveIndex',2);
        },
        showCnt() {
            this.$store.commit('showCnt')
            document.body.style.overflow = 'hidden';
        }
    }
}
</script>
<style lang="less">
.baseInfo{
    .slider{
        position: relative;
    }
    .ui-share{
        position: absolute;
        z-index: 10;
        right: .12rem;
        bottom: .12rem;
        width: .4rem;
        height: .4rem;
        background-color: rgba(0, 0, 0, .4);
        border-radius: 50%;
        text-align: center;
        line-height: .4rem;
    }
    
    .icons4-location{
        background-size: 3.35rem auto;
    }
    .more{
        position: relative;
    }
    .posR{
        position: absolute;
        right: .1rem;
        top: 0;
        bottom: 0;
    }
    .list-title{
        margin-left: .15rem;
        .fr{
            margin-right: .3rem;
        }
    }
}
.pro-info{
    padding: .12rem;
    padding-left: .15rem;
    background-color: #fff;
    .name{
        max-height: .45rem;
        font-size: .15rem;
    }
    .subTitle{
        padding-top: .06rem;
        max-height: .42rem;
    }
    .price{
        height: .18rem;
        line-height: .18rem;
        margin-top: .1rem;
    }
    .ui-row-flex{
        display: flex;
        padding-top: .1rem;
        li{
            flex: 1;
        }
    }

}
.mpcList{
    background-color: #fff;
}
</style>
